*
{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
li
{
    list-style-type: none;
}

html
{
    font-size: 100px;
}

/*最外层的容器*/
.back-box
{
    width: auto;
position: relative;
background: url(../image/美图背景图.jpg) no-repeat;
height:6.1rem;
background-size: 15.35rem 6.1rem;/*让背景图片在浏览器缩放时也充满整个页面*/
}
.header
{
    height: 1.12rem;
    display: flex;
    position: relative;
   align-items: center;//辅轴上对齐
    padding:0  0.41rem;
    justify-content: space-between;
    /*空白位置均匀分配到元素间*/
    flex-direction: row;
max-width: 12rem;
margin: 0 auto;

}

/*菜单图标*/
.nav1
{
    width: 0.2rem;
    height: 0.5rem;
position: absolute;
top: 0.42rem;
z-index: 9;

}
.logo
{
    width: 1rem;
    height: 1rem;
}
.logo img
{
position: absolute;
}
.static
{
    width: 1.1rem;
height: auto;
    display: block;
    top: 0.35rem;
}
.hover
{
    width: 1.1rem;
    height:auto;
    left: 0.37rem;
    top: 0rem;
    display: none;
    z-index: 5;
}
/*菜单图标设置*/
.nav1 li
{
    width: 0.18rem;
    height: 0.02em;
    background-color: rgb(246, 246, 246);
    display: block;
    margin-bottom: 0.07rem;
    z-index: 99;
}

/*菜单点击出现的Li*/
.nav3 
{
    display: flex;
    background-color: rgb(252, 252, 252);
    padding-left: 0.8rem;
    bottom: 0;/*不设置高度，其高度随着屏幕的高度的增大而增大*/
    padding-top: 0.5rem;
    flex-direction: column;
    margin: 0 auto;

    span
    {
        color: black;
        font-size: 0.16rem;
        display: block;
    }
}
.nav3 li 
{
 color: black;
 z-index: 9;
    a
    {
        line-height: 0.6rem; 
          
    }

}
.nav3-li8
{
    position: fixed;
bottom: 0;
}
#nav3-s8
{
    display: inline-block;
    margin-left: -0.2rem;
}
.nav2
{
    position: absolute;
}
/*菜单关闭出现的符号*/
.nav2
{
    position: relative;
    top: 0.5rem;
    width: 0.8rem;
    height: 0.2rem;
    z-index: 2;
}
.nav2 li
{
    margin-left: 0.3rem;
    width: 0.26rem;
    height: 0.02rem;
    background-color:#b0b0b0;
}
.nav2-li1
{
    transform: rotateZ(45deg);
}
.nav2-li2
{
    transform: rotateZ(-45deg);
}
.menu
{
 position: absolute;
 top: -0.2rem;
 bottom: 0; 
//  left: -1.3rem;
left: 0;
 right: 65%;
 display: none;
 padding: 0;
 background-color: white;
}
/*媒体查询，当屏幕大于等于60rem才起作用*/
@media  screen and(min-width:65.7rem) {

    .left-menu
    {
        display: block;
        order: 2; 
         flex: auto;
         span
         {
             color: white;
             font-weight: bold;
         }
        .nav1
        {
            display: none;
        }
       .menu
       {
           position: static;
           display: flex;
           height: 1rem;
           margin-top: -0.113rem;
           background-color: transparent;
           .nav2
           {
               display: none;
           }
           .nav3
           {
               position: static;
            display: flex;
            flex-direction: row;
            background-color: transparent;//背景颜色消失
            justify-content: space-around;/*空白位置平均分配到元素的中间*/
            flex: 1;
            z-index: 9;
            li
            {
                position: relative;
                height: 0.5rem;
                width: auto;
                margin-top: -0.28rem;
                a
                {
                    line-height: 0.6rem; 
                      
                }          
            }
            .nav3-li8
            {
                position:static;
           margin-left: 0.2rem;
           #nav3-s8
           {
               display: inline-block;
               position: relative;
               top: -0.69rem;
           }
            }
           }

       }

       
    }

    .logo
    {
        order: 1;
        flex: 0.5;
    }
    .box
    {
        order: 3;
    }
}

/*菜单栏鼠标移入出现的下拉列表*/
.menu_wrapper
{
width: 100%;
height: 2.7rem;
position: relative;
top: -6.1rem;
display:flex;
padding-top: 0.9rem;
flex: auto;
/*空白盒子与头部导航条布局一样*/
}
.menu_nav
{
    display: flex;
    justify-content:space-between;
    flex: 1 ;
    position: relative;
    float: left;

}

.menu_nav ul{
    display: none;
     position: absolute;
    left:3rem;
height: 2rem;
padding-top: 0.3rem;
top: -0.2rem;
 li
 {
     font-size: 0.15rem;
     margin-bottom:0.2rem ;
 }
 
 li:hover a
 {
     color: #777777;
 }
 a
 {
     color: #ADADAD; 
 }
}
//菜单的下拉列表
.menu_ul a
{
    color: #ADADAD;
   
}
.menu_ul li
{
  display: block;
  margin-bottom: 0.3rem;
}
.menu_ul{
    display: none;
}
//中间模块
.banner
{
position: relative;
top: -3.1rem;
padding-left: 1.6rem;
padding-right: 1.6rem;
}
/*中间文字部分*/
.s-box
{
   
    position: relative;
    margin-left: 0.08rem;
  p
    {
        font-size: 0.16rem;
        text-indent: 0.25rem;
        color: #898989;
        line-height: 0.35rem;
    }
  
}
//中间美图简介
.banner-box1
{
    width: auto;
    height: 1.5rem;
    margin-top: 0.4rem;
    margin-left: 0.08rem;
    display: flex;
    span
    {
        font-size :0.3rem ;
        text-align: center;
        display: block;
        height: 1.5rem;
        line-height: 1.5rem;
        color: #F6FCFF;
    }
    .banner-box1-1
    {
        width: 3.8rem;
        position: relative;
        margin-right: 0.26rem; 
        //颜色渐变
        background: linear-gradient(to bottom right, #FF6440,#F96C95);
cursor: pointer;
float: left;
    }
    .banner-box1-2
    {
        width: 3.8rem;
        position: relative;
        margin-right: 0.26rem; 
        background: linear-gradient(to bottom right, #6153A9,#927DF9,#e4e9ea);
        float: left;
    }
    .banner-box1-3
    {  width: 3.8rem;
        position: relative;
        background: linear-gradient(to top right, #1AD6FD,#3ccdfa,#207fbf);
       float: left;
    }
    .banner-box1-back
    {
        width: 3.8rem;
        height: 1.5rem;
        background-color: black;
        margin-top: -1.5rem;
        opacity: .3;
        display: none;
    }
}
//面向对象盒子
.banner-nav
{
   display: flex;
    width: auto;
    height: 0.9rem;
    margin-top: 0.4rem;
    margin-left: 0.08rem;
    span
    {
        display: block;
        font-size: 0.24rem;
        color: #555;
        text-align: center;
        height: 1rem;
        line-height: 1rem;
    }
    li
    {
        flex: 1;
        float: left;
        position: relative;
    }
}

.banner-nav-li:not(:last-child)
{
margin-right: 0.01rem;
}
//面向用户除了第三个盒子之外添加伪类
.banner-nav-li:not(:first-child)::after
{
//伪元素其内容为空
    content: '';
    height: 0.3rem;
    width: 0.01rem;
    background-color: #E5E5E5;
    display: block;
    position: absolute;
    top: 0.32rem;
}
//面向用户点击出现的盒子
#banner-wrapper0,#banner-wrapper1,#banner-wrapper2
{
 
    // height: 4.4rem;
    background-color: #FAFAFA;
// top: -2.87rem;
padding-left: 1.95rem;
padding-top: 0.65rem;
// display: flex;
width: auto;
// position: relative;
height: auto;
img
{
    width: 0.9rem;
    height: 0.9rem;
    
}
//面向用户的各个小盒子
.banner-wrapper-ul li
{
position: relative;
}
.banner-wrapper-s1
{
    color: #333;
    font-size:0.2rem ;
position: absolute;
top: 0.5rem;
margin-left: 0.2rem;

}
//中间文字段落
p
{
    font-size: 0.145rem;
    color: #787878;
    line-height: 0.3rem;
    margin-top: 0.05rem;
}
//查看更多详情
.banner-wrapper-s2
{
    font-size: 0.16rem;
    color: #f5275f;
//     position: absolute;
// margin-top: 0.21rem;
display: block;
margin-top: 0.21rem;
}
}
.banner-wrapper-ul
{
    width: 13rem;
    height: 3.5rem;
    position: relative;
}
//美图秀秀这一个盒子
.banner-wrapper-ul li
{
    width: 3.37rem;
    float: left;
    margin-right: 0.6rem;
 
}
// 查看更多业务盒子
.last-banner
{
    background-color: #F5275F;
    width: 1.8rem;
height: 0.45rem;
position: absolute;
left: 6.8rem;
cursor: pointer;
    span
    {
        font-size: 0.16rem;
        color: white;
        text-align: center;
        display: block;
        height: 0.45rem;
        line-height: 0.45rem;
    }
}
#banner-wrapper0
{
    display: block;
}
//面向行业
#banner-wrapper1
{
    position: absolute;
    top: 0;
display: none;
}
//核心技术
#banner-wrapper2
{
    position: absolute;
    top: 0;
    left: 1.9rem;
    display:none;
    li
    {
      margin-left: -1.9rem;
    }
}
//面向用户点击的最大盒子
.banner-wrapper-admin
{
    height: 4.4rem;
    position: relative;
    top: -3.1rem;
    background-color: #FAFAFA;
    border-top: 1px solid #E5E5E5;
}
//核心技术下面的盒子对应的查看业务
#last-banner-box
{
    left: 4.85rem;
}
//美图动态
.dynamic
{
    // width: 15rem;
    height: 14.1rem;
    position: relative;
    top: -1.9rem;
  
    //美图动态文字设置
    .dynamic-s1
    {
        display: block;
        font-size: 0.3rem;
        height: 1rem;
        line-height: 1rem;
        text-align: center;
        color: #000;
    }
    img
    {
        width: 5.89rem;
        height: 3.35rem;
    }
    //美图动态下方的盒子
    .dynamic-box1
    {
        // display: flex;
width: 13rem;
// width: 100%;
height: 12rem;
background-color: white;
margin-left: 1.68rem;
    }
    //各个盒子
    .dynamic-box1 li
    {
        width: 5.9rem;
        float: left;
        height: 5.7rem;
        position: relative;
        margin-bottom: 0.3rem;
        border: 0.01rem solid transparent;
        //现设背景颜色为透明色，鼠标移入边框显示为其他颜色，解决移入时盒子浮动
    }
    .dynamic-box1 li:first-child,.dynamic-box1 li:nth-child(3)
    {
        margin-right: 0.45rem;
    }
    .dynamic-box-s
    {
        width: 5.2rem;
        height: 2rem;
        padding-left: 0.3rem;
    }
    //第一行文字的样式
    .dynamic-s2
    {
        font-size: 0.2rem;
        color: #000;
        display: block;
        height: 0.3rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical; 
        margin-bottom: 0.2rem;
    }
    p
{
    font-size: 0.14rem;
    color: #787878;
    line-height: 0.3rem;
    width: 5.2rem;
    height: 0.9rem;
    //解决文本溢出，变成省略号
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; 
}
//日期
.dynamic-date
{
    font-size: 0.16rem;
    color:#b4b4b4;
    position: absolute;
    margin-top: 0.22rem;
}
//查看详情
.dynamic-detail
{
    font-size: 0.16rem;
    color: #f5275f;
    position: absolute;
    margin-top: 0.22rem;
    left: 3.9rem;
}
}
//查看详情箭头
#arrow
{
    width: 0.3rem;
    height: 0.25rem;
    position: absolute;
    left: 4.62rem;
    margin-top: 0.19rem;
}
//查看更多动态
#search-dynamic
{
    position: absolute;
    top: 13.6rem;
}
//美图动态下面的 各个li的鼠标移入事件
.dynamic-box1 li:hover
{
    border: 1px solid #e8e8e8;
}
//最后一个盒子
.footer
{
    width: auto;
    height: 5.3rem;
    background-color: #FAFAFA;
    position: relative;
    top: -1.2rem;
   
}
//加入我们联系我们关注我们的大盒子
.footer-nav
{
    height: 3rem;
      display: flex;
    justify-content: space-evenly;
}
.footer ul
{
    margin-top: -0.2rem;
    span
    {
        font-size: 0.15rem;
        color: gray;
    }
    li
    {
        height: 0.5rem;
    }
   
}
.footer-nav1
{
    margin-left: 0.3rem;
}
#footer-nav-li span
{
    font-size: 0.2rem;
    color: gray;
}
.footer-logo
{
  flex: 0.45;
    height: 0.5rem;

    img
    {
        width: 1.4rem;
        height: auto;
        position: absolute;
        display: block;
        top: 0.2rem;
        left: 12rem;
    }
}
//最下方的文字
.footer-box
{
    width: 10rem;
    height: 1.2rem;
    position: relative;
    top: 0.8rem;
   margin-left: 1.7rem;
    .footer-box-s
    {
        font-size: 0.16rem;
        color: gray;
        position: absolute;
        left: 0;

    }
    .footer-no
    {
        font-size: 0.135rem;
        color: #b4b4b4;
        position: absolute;
        display: block;
        top: 0.45rem;
    }
    //第三行文字
    .footer-no-s1
    {
        font-size: 0.135rem;
        color: #b4b4b4;
      margin-right: -0.25rem;
      position: relative;
      top: -0.2rem;
    }
    #footer-no-s1a
    {
        margin-right: -0.19rem;
    }

    .footer-no-s2
    {
        font-size: 0.135rem;
        color: #b4b4b4;
        display: block;
        margin-top: -0.4rem;

    }
    a:hover span
    {
        color: #F5275F;
    }
}
body
{
    height: 22.8rem;
}